<template>
  <div id="app">
    <div id="nav" style="width:100%;box-sizing: border-box;">
      <img style="height:50px" :src="logo" alt />
      <div class="nav_list" v-if="!$store.getters.screenWidth">
        <el-menu
          :default-active="activeIndex"
          class="el-menu-demo"
          mode="horizontal"
          @select="handleSelect"
          :router="true"
        >
          <el-menu-item index="/index">首页</el-menu-item>
          <el-menu-item index="/product">产品</el-menu-item>
          <el-submenu index="/support">
            <template slot="title">支持</template>
            <el-menu-item index="/afterSale">售后政策</el-menu-item>
            <el-menu-item index="/supportDown">相关下载</el-menu-item>
          </el-submenu>
          <el-submenu index="/news">
            <template slot="title">资讯</template>
            <el-menu-item index="/newsProduct">产品资讯</el-menu-item>
            <el-menu-item index="/newsHangye">行业资讯</el-menu-item>
            <el-menu-item index="/newsGloub">国际资讯</el-menu-item>
          </el-submenu>
          <!-- <el-menu-item index="/support">支持</el-menu-item> -->
          <el-submenu index="/about">
            <template slot="title">关于</template>
            <el-menu-item index="/aboutIndex">关于我们</el-menu-item>
            <el-menu-item index="/contant">联系我们</el-menu-item>
            <el-menu-item index="/Join">加入我们</el-menu-item>
            <el-menu-item index="/feedback">意见反馈</el-menu-item>
          </el-submenu>
          <!-- //登录 -->
          <el-menu-item index="/login" v-if="!token">登录</el-menu-item>
          <el-menu-item index="/register" v-if="!token">注册</el-menu-item>
          <el-menu-item v-if="token">
            <div style="display:flex;align-items:center">
              <el-avatar style="margin-right:10px" size="small" :src="circleUrl"></el-avatar>
              <el-dropdown @command="logout">
                <span class="el-dropdown-link" style="display:flex;align-items:center">
                  <span>{{$store.getters.name}}</span>
                  <i class="el-icon-caret-bottom" style="font-size:12px"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <span @click="tovipcenter('/mineCenter')">
                    <el-dropdown-item>
                      <i class="el-icon-goods"></i>我的订单
                    </el-dropdown-item>
                  </span>
                  <span @click="tovipcenter('/address')">
                    <el-dropdown-item>
                      <i class="el-icon-truck"></i>收货地址
                    </el-dropdown-item>
                  </span>

                  <el-dropdown-item command="logout">
                    <i class="el-icon-refresh-left"></i>退出
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
              <el-popover placement="top-start" width="400" trigger="hover" title="购物车">
                <div slot="reference" style="height:60px">
                  <i class="el-icon-s-goods" style="font-size:15px"></i>购物车
                </div>
                <div>
                  <div>共{{$store.getters['shopcartCount']}}件商品</div>
                  <product-list></product-list>
                  <div style="margin-top:20px;width:100%;display:flex;justify-content: flex-end;">
                    <router-link to="/shopcart">
                      <el-button type="primary" size="small">去结算</el-button>
                    </router-link>
                  </div>
                </div>
              </el-popover>
            </div>
          </el-menu-item>
        </el-menu>
      </div>
      <div v-else class="nav_list">
        <i
          class="el-icon-user-solid"
          style="font-size:22px;margin-left:5px"
          @click="isshowLoginMet()"
        ></i>

        <i class="el-icon-s-fold" style="font-size:22px;margin-left:15px" @click="isshowMenuMet()"></i>
      </div>
    </div>

    <div id="nav_copy">
      <div style="width:117px;height:50px" />
    </div>
    <el-collapse-transition>
      <div v-show=" isshowLogin && $store.getters.screenWidth" class="login_collapse">
        <div style="display:flex;align-items:center" v-if="token">
          <el-menu @select="handleSelectphone">
            <el-menu-item style="text-align:left" index="/mineCenter">我的订单</el-menu-item>
            <el-menu-item style="text-align:left" index="/address">收货地址</el-menu-item>
            <el-menu-item style="text-align:left" index="/shopcart">购物车</el-menu-item>
            <el-menu-item style="text-align:left" index="/louou">退出</el-menu-item>
          </el-menu>
        </div>
        <div v-else style="display:flex;align-items:center;height:60px;justify-content: center;">
          <router-link to="/login">
            <span style="font-size:14px;color:#2a333c;margin-right:20px">登录</span>
          </router-link>
          <router-link to="/register">
            <span style="font-size:14px;color:#2a333c;margin-right:10px">注册</span>
          </router-link>
        </div>
      </div>
    </el-collapse-transition>
    <el-collapse-transition>
      <div class="login_collapse" v-show="isshowMenu && $store.getters.screenWidth">
        <el-menu
          :default-active="activeIndex"
          @select="handleSelect"
          :router="true"
          style="border:none!important"
        >
          <el-menu-item style="text-align:left" index="/index">首页</el-menu-item>
          <el-menu-item style="text-align:left" index="/product">产品</el-menu-item>
          <el-submenu style="text-align:left" index="/support">
            <template slot="title">支持</template>
            <el-menu-item style="text-align:left" index="/afterSale">售后政策</el-menu-item>
            <el-menu-item style="text-align:left" index="/supportDown">相关下载</el-menu-item>
          </el-submenu>
          <el-submenu style="text-align:left" index="/news">
            <template slot="title">资讯</template>
            <el-menu-item style="text-align:left" index="/newsProduct">产品资讯</el-menu-item>
            <el-menu-item style="text-align:left" index="/newsHangye">行业资讯</el-menu-item>
            <el-menu-item style="text-align:left" index="/newsGloub">国际资讯</el-menu-item>
          </el-submenu>
          <el-submenu style="text-align:left" index="/about">
            <template slot="title">关于</template>
            <el-menu-item style="text-align:left" index="/aboutIndex">关于我们</el-menu-item>
            <el-menu-item style="text-align:left" index="/contant">联系我们</el-menu-item>
            <el-menu-item style="text-align:left" index="/Join">加入我们</el-menu-item>
            <el-menu-item style="text-align:left" index="/feedback">意见反馈</el-menu-item>
          </el-submenu>
        </el-menu>
      </div>
    </el-collapse-transition>

    <div class="contact_hover" style="transition: all 0,5s ease 0s;">
      <div @click="hoverTo('/contant')">
        <i style="font-size:28px;color:#fff" class="el-icon-phone-outline"></i>
      </div>
      <div @click="hoverTo('/feedback')">
        <i style="font-size:28px;color:#fff" class="el-icon-chat-dot-round"></i>
      </div>
    </div>
    <transition name="el-fade-in-linear">
      <router-view />
    </transition>
  </div>
</template>
<script>
import { mapGetters } from "vuex";
import productList from "./components/productList";
import { companyInfo } from "./api/api";

export default {
  data() {
    return {
      isshowLogin: false,
      isshowMenu: false,
      timer: false,
      screenWidth: "",
      activeIndex: "/",
      logo: "",
      circleUrl:
        "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"
    };
  },

  components: { productList },
  updated() {
    this.activeIndex = this.$store.state.torouter;
  },
  watch: {
    screenWidth(val) {
      // 为了避免频繁触发resize函数导致页面卡顿，使用定时器
      if (!this.timer) {
        // 一旦监听到的screenWidth值改变，就将其重新赋给data里的screenWidth
        this.screenWidth = val;
        this.timer = true;
        let that = this;
        setTimeout(function() {
          // 打印screenWidth变化的值
          if (that.screenWidth < 500) {
            that.$store.commit("setscreenWidth", true);
          } else {
            that.$store.commit("setscreenWidth", false);
          }
          that.timer = false;
        }, 0);
      }
    },
    move() {
      setTimeout(() => {
        this.isshowLogin = false;
        this.isshowMenu = false;
      }, 500);
    }
  },
  computed: {
    ...mapGetters({
      token: "token",
      move: "move",
      userId: "userId"
    })
  },
  created() {
    const that = this;
    
    this.screenWidth = window.screen.width;
    if (that.screenWidth < 500) {
      that.$store.commit("setscreenWidth", true);
    } else {
      that.$store.commit("setscreenWidth", false);
    }
    window.onresize = () => {
      return (() => {
        window.screenWidth = document.body.clientWidth;
        that.screenWidth = window.screenWidth;
      })();
    };
  },
  mounted() {
    this.getmenu();
  },
  beforeDestroy() {},
  methods: {
    hoverTo(key) {
      this.$store.commit("setaboutPath", key);
      this.$router.push(key);
    },
    async getmenu() {
      const logo = await companyInfo();
      this.logo = logo.data.logo;
    },
    isshowLoginMet() {
      this.isshowLogin = !this.isshowLogin;
      this.isshowMenu = false;
    },
    isshowMenuMet() {
      this.isshowMenu = !this.isshowMenu;
      this.isshowLogin = false;
    },
    handleSelect(key) {
      this.$store.commit("setaboutPath", key);
      this.isshowMenu = false;
    },
    handleSelectphone(key) {
      if(key == '/louou'){
        this.logoutoo()
        return
      }
      this.$router.push(key)
      this.isshowMenu = false;
    },
    tovipcenter(index) {
      this.$router.push({ path: index, query: { path: index } });
      this.$store.commit("setrouterpath", index);
      this.$root.$emit("changeAddress");
    },
    logout(val) {
      if (val == "logout") {
        this.$store.commit("settoekn", "");
        this.$store.commit("setUserId", "");
        this.$router.push("/index");
      }
    },
    logoutoo() {
      this.$store.commit("settoekn", "");
      this.$store.commit("setUserId", "");
      this.$router.push("/index");
    }
  }
};
</script>
<style lang="scss">
.el-menu{
  border-right:none!important;
  width:100%;
}
#app {
  position: relative;
  width: 100%;
  box-sizing: border-box;
}
.contact_hover {
  width: 50px;
  height: 110px;
  background-color: #000;
  border-radius: 10px 0 0 10px;
  opacity: 0.3;
  z-index: 99999;
  position: fixed;
  top: 30%;
  right: -38px;
  padding: 10px 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  animation: tototo 10s infinite linear forwards;
  &:hover {
    right: 0;
    animation: none;
  }
}

@-webkit-keyframes tototo {
  0% {
  }
  25% {
  }
  50% {
  }
  80% {
  }
  85% {
    right: -38px;
  }
  87% {
    right: -18px;
  }
  92% {
    right: -38px;
  }
  96% {
    right: -18px;
  }
  100% {
    right: -38px;
  }
}
.el-icon-phone-outline {
  animation: gogogo 2s infinite linear;
}

@-webkit-keyframes gogogo {
  0% {
    -webkit-transform: rotate(30deg);
  }
  25% {
    -webkit-transform: rotate(-30deg);
  }
  50% {
    -webkit-transform: rotate(30deg);
  }
  75% {
    -webkit-transform: rotate(-30deg);
  }
  100% {
    -webkit-transform: rotate(30deg);
  }
}
.el-menu.el-menu--horizontal {
  border: none !important;
}
.el-menu-item.is-active {
  border: none !important;
  color: #409eff !important;
}
.el-menu--horizontal > .el-submenu.is-active .el-submenu__title {
  border: none !important;
  color: #409eff !important;
}
.el-menu-item {
  transition: none !important;
}
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
#nav_copy {
  display: flex;
  background-color: #fff;
  width: 100%;
  align-items: center;
  padding: 5px 20px;
  box-sizing: border-box;
  .logo {
    width: 15%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .nav_list {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }
  a {
    font-weight: bold;
    color: #2c3e50;
    &.router-link-exact-active {
      color: #42b983;
    }
  }
}
#nav {
  position: fixed;
  top: 0;
  z-index: 999;
  display: flex;
  background-color: #fff;
  width: 100%;
  padding: 5px 20px;
  box-sizing: border-box;
  align-items: center;
  .logo {
    width: 15%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .nav_list {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }
  a {
    font-weight: bold;
    color: #2c3e50;
    &.router-link-exact-active {
      color: #42b983;
    }
  }
}
.login_collapse {
  width: 100%;
  position: fixed;
  top: 60px;
  z-index: 9999;
  background-color: #fff;
  box-sizing: border-box;
  padding: 0px 20px;
  border-bottom: 1px solid #eee;
}
</style>
